<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Monospace;
            background-color: #fff;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            position:relative;
            color: #444;
            background-color: rgb(167, 167, 167);
            position: relative;
            width: 500px;
            height: 500px;
            text-align: center;
            z-index: 100;
        }
        #info .btn-wapper{
            display: flex;
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0;
            height: 50px;
        }
        #info .btn-wapper .button{
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin:10px;
            padding:10px;
            background-color: rgb(0, 140, 255);
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="info">
        <div class="btn-wapper">
            <div class="button" onclick="changeCamera('front')">正视图</div>
            <div class="button" onclick="changeCamera('left')">侧视图</div>
            <div class="button" onclick="changeCamera('top')">顶视图</div>
            <div class="button" onclick="changeCamera('bottom')">底视图</div>
            <div class="button" onclick="changeCamera('free')">自由视角</div>
        </div>
    </div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="module">
import * as THREE from './js/zr/three.module.js'
import { OrbitControls } from './js/zr/OrbitControls.js'
import { CSS3DRenderer, CSS3DObject } from './js/zr/CSS3DRenderer.js'
import { OBJLoader } from './js/zr/OBJLoader.js'

let camera, scene, renderer, controls;
let scene2, renderer2;
const frustumSize = 2000;

init();
// animate();

window.changeCamera = function(position){
    if(position=='front'){
        camera.position.set(0,0, 2000);
        camera.up.x = 0
        camera.up.y = 1
        camera.up.z = 0
        controls.enableRotate = false
    }
    if(position=='left'){
        camera.position.set(0,0, 2000);
        camera.up.x = -1
        camera.up.y = 0
        camera.up.z = 0
        controls.enableRotate = false
    }
    if(position=='top'){
        camera.position.set(0,2000, 0);
        camera.up.x = 0
        camera.up.y = 0
        camera.up.z = 1
        controls.enableRotate = false
        
    }
    if(position=='bottom'){
        camera.position.set(0,-2000, 0);
        camera.up.x = 0
        camera.up.y = 0
        camera.up.z = 1
        controls.enableRotate = false
    }
    if(position=='free'){
        camera.position.set(300,800, 2000);
        camera.up.x=1
        camera.up.y=1
        camera.up.z=0
        controls.enableRotate = true
    }
    camera.zoom = 1
    camera.lookAt( scene.position );
    camera.updateProjectionMatrix()
    render()
}

function initCamera(){
    let wapperDom = $("#info")
    let aspect = wapperDom.width() / wapperDom.height();
    camera = new THREE.OrthographicCamera( frustumSize * aspect * -1, frustumSize * aspect, frustumSize, -frustumSize, 1, 5000 );
    var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
    camera.add( pointLight );
    camera.position.set( 300,800, 2000 );
    camera.up.x=1
    camera.up.y=1
    camera.up.z=0
}

function initControls(){
    controls = new OrbitControls( camera, renderer.domElement );
    controls.minZoom = 0.5;
    controls.maxZoom = 2;
    controls.enablePan = false
    controls.addEventListener('change', render);
}

function init() {
    let wapperDom = $("#info")
    initCamera()
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xcccccc );
    var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
    scene.add( ambientLight );
    scene.add( camera );

    loadModel()

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( wapperDom.width(), wapperDom.height() );
    wapperDom[0].appendChild( renderer.domElement );

    initControls()
    
    render()

    function loadModel(){
        var loader = new OBJLoader( );
        loader.load( 'model/din933.obj', function ( obj ) {
            scene.add( obj )
            render()
        }, ()=>{}, ()=>{} );
    }
}

function render(){
    // camera.lookAt( scene.position );
    renderer.render( scene, camera );
}

function animate() {
    requestAnimationFrame( animate );
    render()
}
    </script>
</body>
</html>